<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
<!--      <el-form-item>-->
<!--        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="品牌名称" prop="name">
        <el-input
          v-model="dataForm.name" placeholder="品牌名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('product:brand:save')"
          type="primary"
          @click="add()"
          @refreshDataList="getDataList"
        >新增</el-button>
        <el-button
          type="primary"
          @click="resetForm()"
          @refreshDataList="getDataList"
        >重置</el-button>
        <el-button
          v-if="isAuth('product:brand:delete')"
          type="danger"
          @click="batchDelete()"
          :disabled="dataListSelections.length <= 0"
        >批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="brandId"
        header-align="center"
        align="center"
        label="品牌id"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="品牌名"
      >
      </el-table-column>
      <el-table-column
        prop="logo"
        header-align="center"
        align="center"
        label="品牌logo地址"
      >
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span> -->
          <img v-if="scope.row.logo" :src="scope.row.logo" width="100px" height="80px"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="descript"
        header-align="center"
        align="center"
        label="介绍"
      >
      </el-table-column>
      <el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="显示状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="firstLetter"
        header-align="center"
        align="center"
        label="检索首字母"
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        header-align="center"
        align="center"
        label="排序"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="200"
        label="操作">

        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateCatelogHandle(scope.row.brandId)">
            关联分类
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="update(scope.row)"
            @refreshDataList="getDataList"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteSingle(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!--  品牌新增或更新弹窗  -->
    <brand-add-or-update ref="BrandAddOrUpdate" :operateFlag="operateFlag" @refreshDataList="getDataList"></brand-add-or-update>

    <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="30%" @close="closeDialogHandler">
      <el-popover placement="right-end" v-model="popCatelogSelectVisible">
        <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
        </div>
        <el-button slot="reference">新增关联</el-button>
      </el-popover>
      <el-table :data="cateRelationTableData" style="width: 100%">
        <el-table-column prop="id" label="#" v-if="false"></el-table-column>
        <el-table-column prop="brandName" label="品牌名"></el-table-column>
        <el-table-column prop="catelogName" label="分类名"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cateRelationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
// import BrandAddOrUpdate from '@/components/product/brand-add-or-update.vue'
const BrandAddOrUpdate = () => import('@/components/product/brand-add-or-update.vue')
import CategoryCascader from "../common/category-cascader";


export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      brandId: 0,
      catelogPath: [],
      cateRelationTableData: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      operateFlag:'0', // 0新增 1修改
      cateRelationDialogVisible: false,
      popCatelogSelectVisible: false
    }

  },
  components: {
    BrandAddOrUpdate,
    CategoryCascader
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/product/brand/queryBrandPage'),
        method: "post",
        data: this.$http.adornData({
          currPage: this.pageIndex,
          pageSize: this.pageSize,
          // key: this.dataForm.key,
          data: {
            name: this.dataForm.name || ''
          }
        }, false)
      }).then(({ data }) => {
        console.log("data >>>", data)
        let res = data.data
        if (data && data.code === 200) {
          this.dataList = res.list;
          this.totalPage = res.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选 勾选使用
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 删除
    deleteSingle (row) {
      console.log('删除row >>>', row)
      // 弹窗提示
      this.$confirm(`是否确认删除品牌【${row.name}】?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [row.brandId]
        this.$http({
          url: this.$http.adornUrl('/product/brand/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
          // 重新加载所有的菜单数据
          this.getDataList()
        })
      })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    update(row) {
      console.log('编辑row >>>', row)
      // this.$refs.BrandAddOrUpdate.dialogVisible = true
      this.operateFlag = '1'
      this.$nextTick(() => {
        this.$refs.BrandAddOrUpdate.init(row.brandId);
      });
    },
    add() {
      // this.$refs.BrandAddOrUpdate.dialogVisible = true
      this.operateFlag = '0'
      this.$nextTick(() => {
        this.$refs.BrandAddOrUpdate.init(undefined);
      });
    },
    resetForm() {
      this.dataForm.name = ''
      this.pageSize = 10;
      this.pageIndex = 1;
      this.getDataList()
    },
    // 更新品牌展示状态
    updateBrandStatus(row) {
      this.$http({
        url: this.$http.adornUrl('/product/brand/update'),
        method: 'post',
        data: this.$http.adornData({
          brandId: row.brandId,
          showStatus: row.showStatus
        }, false)
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
        // 重新加载所有的菜单数据
        this.getDataList()
      })
    },
    // 批量删除
    batchDelete() {
      console.log("this.dataListSelections>>>", this.dataListSelections)
      if(this.dataListSelections.length <= 0) {// 不加也可以，已经用按钮做了处理
        return;
      } else {
        let ids = []
        this.dataListSelections.forEach(item => {
          ids.push(item.brandId)
        })
        console.log('ids >>>', ids)
        // 弹窗提示
        this.$confirm(`是否确认批量删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/product/brand/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 200) {
              this.$message({
                message: '批量删除成功',
                type: 'success'
              })
            }
            // 重新加载所有的菜单数据
            this.getDataList()
          })
        })
      }
    },
    /* 关联分类 */
    closeDialogHandler() {
      this.catelogPath = []
    },
    addCatelogSelect() {
      //{"brandId":1,"catelogId":2}
      this.popCatelogSelectVisible =false;
      this.$http({
        url: this.$http.adornUrl("/product/categorybrandrelation/save"),
        method: "post",
        data: this.$http.adornData({
          brandId:this.brandId,
          catelogId:this.catelogPath[this.catelogPath.length-1]
          }, false)
      }).then(({ data }) => {
        this.getCateRelation();
        this.catelogPath = []
      });
    },
    deleteCateRelationHandle(id, brandId) {
      this.$http({
        url: this.$http.adornUrl("/product/categorybrandrelation/delete"),
        method: "post",
        data: this.$http.adornData([id], false)
      }).then(({ data }) => {
        this.getCateRelation();
      });
    },
    updateCatelogHandle(brandId) {
      this.cateRelationDialogVisible = true;
      this.brandId = brandId;
      this.getCateRelation(); // 初始化关联分类弹窗表格数据
    },
    getCateRelation() {
      this.$http({
        url: this.$http.adornUrl(`/product/categorybrandrelation/catelogList/${this.brandId}`),
        method: "get"
      }).then(({data}) => {
        console.log('res >>>', data)
        if (data && data.code === 200) {
          this.cateRelationTableData = data.data;
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      });
    },
  }

}
</script>

